<template>
  <div class="can-container">
    <div>
      <span class="title">字典查询</span>
      <el-divider></el-divider>
      <div class="form filter-container">
        <el-form
          :model="formSearch"
          label-width="100px"
          label-position="left"
          ref="formSearch"
        >
          <el-form-item label="字典类型名称" prop="value">
            <el-input v-model="formSearch.value" style="width:300px"></el-input>
          </el-form-item>
          <el-form-item label="字典类型代码" prop="key">
            <el-input v-model="formSearch.key" style="width:300px"></el-input>
          </el-form-item>
        </el-form>
        <div>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch"
            >查询</el-button
          >
          <el-button icon="el-icon-refresh" @click="handleResetSearch"
            >重置</el-button
          >
        </div>
      </div>
    </div>
    <div class="userList">
      <span class="title">字典列表</span>
      <el-divider></el-divider>
      <div class>
        <el-button icon="el-icon-plus" type="primary" @click="btnEidte(1)"
          >新增</el-button
        >
        <el-button type="danger" icon="el-icon-delete">批量删除</el-button>
      </div>
      <el-divider></el-divider>
      <el-table
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        v-loading="tableLoading"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="value"
          label="字典类型名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="key"
          label="字典类型代码"
          align="center"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="260" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleDictionaryDialog(scope.row)"
              >字典项</el-button
            >
            <!-- <el-button size="mini" type="primary" @click="btnEidte(2)">编辑</el-button> -->
            <!-- <el-button size="mini" type="danger">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="10"
          layout="prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <!-- 字典项弹框 -->
    <el-dialog :close-on-click-modal="false" :title="dialogData.value" :visible.sync="dictionaryVisible">
      <div>
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="handleAddDictionary"
          >添加</el-button
        >
      </div>
      <el-table
        :data="dictionaryData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          label="排序"
          type="index"
          show-overflow-tooltip
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="字典类型名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="code"
          label="字典项代码"
          align="center"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="260" align="center">
          <template slot-scope="scope">
            <el-button
              size="small"
              class="btnuser"
              @click="handleUpdateDictionary(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="handleDeleteDictionary(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 添加、编辑字典 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="dialogVisible"
      width="20%"
      center
      @close="handleClose"
    >
      <el-form
        :model="formData"
        :rules="ruleForm"
        ref="ruleForm"
        label-width="100px"
      >
        <el-form-item label="字典项名称" prop="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="字典项代码" prop="code">
          <el-input v-model="formData.code"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="orders">
          <el-input type="number" v-model="formData.orders"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="text-center">
        <el-button type="primary" @click="handleSubmit">确定</el-button>
        <el-button @click="handleClose">重置</el-button>
      </div>
    </el-dialog>
    <!-- 成果模板弹框 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="resultsDialog.title"
      :visible.sync="resultsDialog.visible"
    >
      <div>
        <el-button icon="el-icon-plus" type="primary" @click="handleAddResult"
          >添加</el-button
        >
      </div>
      <el-table
        :data="dictionaryData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          label="排序"
          type="index"
          show-overflow-tooltip
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="成果模板名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="code"
          label="成果模板代码"
          align="center"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="260" align="center">
          <template slot-scope="scope">
            <!-- <el-button size="small" class="btnuser" @click="handleUpdateResult(scope.row)">编辑</el-button> -->
            <el-button
              size="small"
              type="danger"
              @click="handleDeleteResult(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 成果模板新增 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="addResultDialog.title"
      :visible.sync="addResultDialog.visible"
      width="20%"
      center
      @close="handleCloseResult"
    >
      <el-form
        :model="addResultDialog.formData"
        ref="resultFormData"
        label-width="100px"
      >
        <el-form-item label="成果类型模板" prop="type">
          <el-select
            v-model="addResultDialog.formData.type"
            style="width:100%"
            @change="handleSelectResultType"
          >
            <el-option
              v-for="item in addResultDialog.typeList"
              :key="item.id"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成果模板名称" prop="name">
          <el-input
            v-model="addResultDialog.formData.name"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="成果模板代码" prop="code">
          <el-input
            v-model="addResultDialog.formData.code"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="文件上传" prop="orders">
          <el-upload
            ref="uploadFile"
            :action="uploadUrl"
            :headers="headers"
            :on-success="handleSuccessFile"
            :limit="1"
            :on-exceed="uploadLimit"
            accept=".zip"
          >
            <el-button type="primary" size="mini">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="text-center">
        <el-button type="primary" @click="handleSubmitResult">确定</el-button>
        <el-button @click="handleCloseResult">重置</el-button>
      </div>
    </el-dialog>
		<!-- 成果模板弹框 -->
		<el-dialog :close-on-click-modal="false" :title="resultsDialog.title" :visible.sync="resultsDialog.visible">
			<div>
			  <el-button icon="el-icon-plus" type="primary"  @click="handleAddResult">添加</el-button>
			</div>
			<el-table
			  :data="dictionaryData"
			  tooltip-effect="dark"
			  style="width: 100%"
			  @selection-change="handleSelectionChange"
			>
			  <el-table-column type="selection" width="55"  align="center"></el-table-column>
			  <el-table-column label="排序" type="index" show-overflow-tooltip width="60" align="center"></el-table-column>
			  <el-table-column prop="name" label="成果模板名称" align="center"></el-table-column>
			  <el-table-column prop="code" label="成果模板代码" align="center"></el-table-column>
			  <el-table-column fixed="right" label="操作" width="260" align="center">
			    <template slot-scope="scope">
			      <!-- <el-button size="small" class="btnuser" @click="handleUpdateResult(scope.row)">编辑</el-button> -->
			      <el-button size="small" type="danger" @click="handleDeleteResult(scope.row)">删除</el-button>
			    </template>
			  </el-table-column>
			</el-table>
		</el-dialog>
		<!-- 成果模板新增 -->
		<el-dialog :close-on-click-modal="false" :title="addResultDialog.title" :visible.sync="addResultDialog.visible" width="20%" center @close="handleCloseResult">
		  <el-form :model="addResultDialog.formData" ref="resultFormData" label-width="100px">
				<el-form-item label="成果类型模板" prop="type">
					<el-select v-model="addResultDialog.formData.type" style="width:100%" @change="handleSelectResultType">
						<el-option v-for="item in addResultDialog.typeList" :key="item.id" :label="item.value" :value="item.key"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="成果模板名称" prop="name">
				  <el-input v-model="addResultDialog.formData.name" :disabled="true"></el-input>
				</el-form-item>
		    <el-form-item label="成果模板代码" prop="code">
		      <el-input v-model="addResultDialog.formData.code" :disabled="true"></el-input>
		    </el-form-item>
		    <el-form-item label="文件上传" prop="orders">
		      <el-upload
					ref="uploadFile"
					:action="uploadUrl"
					:headers="headers"
					:on-success="handleSuccessFile"
					:limit="1"
					:on-exceed="uploadLimit"
					accept=".zip"
					>
						<el-button type="primary" size="mini">点击上传</el-button>
					</el-upload>
		    </el-form-item>
		  </el-form>
			<div slot="footer" class='text-center'>
				<el-button type="primary" @click="handleSubmitResult">确定</el-button>
				<el-button @click="handleCloseResult">重置</el-button>
			</div>
		</el-dialog>
  </div>
</template>

<script>
import {
  getDictionaryData,
  searchDictionaryType,
  newAddDictionary,
  updateDictionary,
  deleteDictionary,
  queryResultTemplate
} from "@/api/project/system/dictionary.js";
import { getToken } from "@/utils/auth";
import config from "@/config/index.js";
export default {
  data() {
    return {
      //文件上传地址
      uploadUrl: config.baseUrlImg + "/pc/file/upload",
      headers: {
        authorization: getToken()
      },
      formSearch: {
        value: "",
        key: ""
      },
      tableData: [],
      tableLoading: false,
      multipleSelection: [],
      dialogVisible:false,//添加、编辑字典弹框
      title:'字典项_新增',//添加：1，编辑：2：查看
			dictionaryData:[],
      formData: {
        name: "",
        code: "",
        orders: 1
      },
      ruleForm: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        code: [{ required: true, message: "请输入", trigger: "blur" }],
        orders: [{ required: true, message: "请输入", trigger: "blur" }]
      },
      currentPage: 1,
      total: 0,
      dialogData: {},
      dictionaryVisible: false,
      submitType: 0, //0：新增；1：编辑
      resultsDialog: {
        title: "成果模板",
        visible: false,
        tableData: []
      },
      addResultDialog: {
        title: "成果模板_新增",
        visible: false,
        formData: {
          name: "",
          code: "",
          orders: "",
          dictionaryType: ""
        },
        submitType: 0 //0：新增；1：编辑
      }
    };
  },
  created() {
    this.getInitData();
  },
  methods: {
    //获取初始化数据
    getInitData: function() {
      this.handleDictionaryData();
    },
    //获取字典列表
    handleDictionaryData: function(page) {
      this.tableLoading = true;
      let params = {
        page: page ? page : this.currentPage,
        size: 10
      };
      Object.assign(params, this.formSearch);
      getDictionaryData(params).then(res => {
        this.tableData = res.data.rows;
        this.total = res.data.total;
        this.tableLoading = false;
      });
    },
    //查询
    handleSearch: function() {
      this.handleDictionaryData(1);
    },
    //重置查询条件
    handleResetSearch: function() {
      this.$refs["formSearch"].resetFields();
    },
    //字典项弹框
    handleDictionaryDialog: function(row) {
      if (row.key == "RESULT_TEMPLATE") {
        this.resultsDialog.visible = true;
        queryResultTemplate().then(res => {
          this.addResultDialog["typeList"] = res.data;
        });
      } else {
        this.dictionaryVisible = true;
      }
      this.dialogData = row;
      this.searchDictionaryType(row.key);
    },
    searchDictionaryType: function(type) {
      let params = {
        dictionaryType: type,
        page: 1,
        size: 999
      };
      this.dictionaryData = [];
      searchDictionaryType(params).then(res => {
        this.dictionaryData = res.data.rows;
      });
    },
    //新增弹框
    handleAddDictionary: function() {
      this.dialogVisible = true;
      this.title = "字典项_新增";
      this.submitType = 0;
    },
    //编辑弹框
    handleUpdateDictionary: function(row) {
      this.dialogVisible = true;
      this.title = "字典项_编辑";
      this.submitType = 1;
      this.formData = JSON.parse(JSON.stringify(row));
    },
    //新增、编辑确定保存
    handleSubmit: function() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this.formData));
          if (this.submitType == 0) {
            params["dictionaryType"] = this.dialogData.key;
            newAddDictionary(params).then(res => {
              this.$message.success("操作成功！");
              this.dialogVisible = false;
              this.searchDictionaryType(this.dialogData.key);
            });
          } else {
            updateDictionary(params).then(res => {
              this.$message.success("操作成功！");
              this.dialogVisible = false;
              this.searchDictionaryType(this.dialogData.key);
            });
          }
        }
      });
    },
    //删除
    handleDeleteDictionary: function(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error"
      }).then(res => {
        let params = {
          id: row.id
        };
        deleteDictionary(params).then(res => {
          this.$message.success("操作成功！");
          this.searchDictionaryType(this.dialogData.key);
        });
      });
    },
    handleClose: function() {
      this.$refs["ruleForm"].resetFields();
      this.formData = {
        name: "",
        code: "",
        orders: 1
      };
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.handleDictionaryData(val);
    },
    //成果模板弹框
    handleAddResult: function() {
      this.addResultDialog.visible = true;
      this.addResultDialog.title = "成果模板_新增";
    },
    //成功模板上传文件成功回调
    handleSuccessFile: function(res, file, filelist) {
      this.addResultDialog.formData.orders = res.data.id;
    },
    //文件超限回调
    uploadLimit: function() {
      this.$message.error("文件上传限制1个，请先删除再上传！");
    },
    //新增、编辑成功模板
    handleSubmitResult: function() {
      if (this.addResultDialog.submitType == 0) {
        this.addResultDialog.formData["dictionaryType"] = this.dialogData.key;
        newAddDictionary(this.addResultDialog.formData).then(res => {
          this.$message.success("操作成功！");
          this.addResultDialog.visible = false;
          this.searchDictionaryType(this.dialogData.key);
        });
      } else {
      }
    },
    //成果类型模板类型选择回调
    handleSelectResultType: function(val) {
      let obj = this.addResultDialog["typeList"].filter(item => {
        return item.key == val;
      })[0];
      this.addResultDialog.formData["name"] = obj.value;
      this.addResultDialog.formData["code"] = obj.key;
    },
    //删除成果类型
    handleDeleteResult: function(row) {
      this.$confirm("此操作将永久删除该成果模板, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error"
      }).then(res => {
        let params = {
          id: row.id
        };
        deleteDictionary(params).then(res => {
          this.$message.success("操作成功！");
          this.searchDictionaryType(this.dialogData.key);
        });
      });
    },
    handleCloseResult: function() {
      this.$refs["resultFormData"].resetFields();
      this.$refs["uploadFile"].clearFiles();
    }
  }
};
</script>
<style lang="scss" scoped>
.can-container {
  padding: 20px;
  background: #fff;
  .title {
    font-size: 17px;
    font-weight: bold;
    color: rgba(72, 73, 77, 1);
    line-height: 33px;
  }
}

.btnsearch {
  background: #969799;
  color: white;
}

.btnReset {
  background: white;
  color: #969799;
}
.userList {
  margin: 30px 0px;
}
.btnuser {
  border: 1px solid #2e8ae6;
  color: #2e8ae6;
}
.pages {
  text-align: center;
  margin: 20px auto;
}
.rolesTitle {
  font-size: 14px;
  color: #333333;
}
.rolesBox {
  width: 224px;
  height: 308px;
  background: #f8f8f8;
  border-radius: 4px;
  padding: 5px 15px;
}
.rolesBox p {
  padding: 5px;
  font-size: 12px;
  color: #333;
  display: flex;
  justify-content: space-between;
}
.rolesBox p.clickNo {
  color: #2e8ae6;
  cursor: pointer;
}
.rolesBox p:hover {
  color: #2e8ae6;
  cursor: pointer;
}

.authorization {
  font-size: 16px;
  color: #333;
}
.authorizationRoles {
  color: #2e8ae6;
}
</style>
